
<template>
    <div style="background-color: bisque;">
        <h1>我是父组件，这个底色都是我，我的子组件都有其他颜色</h1>
        <h2>1.注册全局组件</h2>
        <DoubleCounter></DoubleCounter>
        <h2>2.注册局部组件</h2>
        <ButtonCounter></ButtonCounter>
        <h2>3.使用kebab-case注册组件</h2>
        <h3>同一组件被调用多次时，各自的数据是独立的</h3>
        <button-counter/>
        <h2>4.组件可以重复按需调用</h2>
        <HelloHello name = '张三'/>
        <hr>
        <HelloHello name = '李四'/>
        <hr>
        <HelloHello name = 'Tom'/>
        <hr>
        <HelloHello name = 'Jane'/>
        <hr>
        <HelloHello name = '李金金'/>
        <hr>
        <h2>5.动态组件</h2>
        <h3>使用component实现动态组件，它允许开发人员在不同的场景下
            灵活地渲染不同的组件，应用场景很多，具体看数据项目四任务三
        </h3>
        <input type="radio" v-model="activeD" value="DengLu1">微信登录
        <input type="radio" v-model="activeD" value="DengLu2">QQ登录
        <!-- 动态调用组件 -->
         <component :is="activeD"></component>
         <h2>6.带缓存的导航组件</h2>
         <button @click="activeT = 'TDao1'">冰淇淋</button>
         <button @click="activeT = 'TDao2'">蛋糕</button>
         <button @click="activeT = 'TDao3'">火锅</button>
         <!-- 使用keep-active可以缓存组件状态 -->
          <keep-alive>
            <component :is="activeT"></component>
          </keep-alive>
        <h2>7.异步组件：可以保证系统的稳定性和响应</h2>
        <h3>suspense是vue3的内置组件，用于协调对组件树种嵌套的异步依赖处理，它有 两个插件，一个是default
            一个是fallback，default中的内容是当前内容可以显示则显示，则显示fullback中的内容
        </h3>
        <Suspense>
            <template v-slot:default>
                <div>
                    <DelayConn/>
                </div>
            </template>
            <template v-slot:fallback>
                <div>
                    <h2>Loading......</h2>
                </div>
            </template>
        </Suspense>
        <h2>8.props实现父组件与子组件的通信，通过$emit实现子组件与父组件的通信</h2>
        <SonOne toSon="孩子，你有没有在好好学习前段啊？" @score="dadHandle"></SonOne>
        <h3>注意，无论我们传递的是何种格式的数据，传递过去的都按字符串。我们可以
            使用v-bind：来动态绑定属性，通过变量来实现数据的传递</h3>
        <h2>9.props对象用法</h2>
        <h3>可以为组件的props指定验证要求，例如，指定数据类型，如果传递过来的数据不符合要求，会发出警告</h3>
        <SonTwo :name="name" :age="age"></SonTwo>
        <h2>10.props数据是单向流动的</h2>
        <h3>父组件的数据也可能会传递给其他子组件，如果父组件的数据被其中一个子组件修改了，则会影响到其他的子组件数据的使用</h3>
        <h3>如果子组件想要在自己的作用域里修改父组件传递过来的数据，就需要再子组件的data中
            另外定义一个变量，引用父组件传递过来的props值
        </h3>
        准备给孩子一个大大的棒。<SonOne :wid="wid"></SonOne>
        <h2>11.通过$refs实现父组件与子组件通信</h2>
        <h3>$refs是vue提供的一个内置对象，拥有已使用ref属性成功注册的所有元素和子组件，
            通过$ref可以直接访问DOM元素或子组件实例，使得父组件可以与子组件进行通信
        </h3>
        <button @click="send()">我还要和孩子说一句话</button>
        <SonOne ref="childRef"></SonOne>
        <h2>12.provide 和 inject 实现组件链的通信</h2>
        <h3>非父子组件通信包括兄弟组件 和夸多级组件的通信，provide和inject两个用于实现组件链的通信
            provide选项允许父组件向其所有子组件注入一些数据或方法，这个注入的数据或方法对于父组件来说是全局可以用的,
            可以在inject选项中选取
        </h3>
        <SonThree></SonThree>




    </div>
</template>

<script>
import ButtonCounter from '@/components/ButtonCounter.vue';
import TDao1 from '@/components/DaoHang/TDao1.vue';
import TDao2 from '@/components/DaoHang/TDao2.vue';
import TDao3 from '@/components/DaoHang/TDao3.vue';
import DelayConn from '@/components/DelayConn.vue';
import DengLu1 from '@/components/DengLu1.vue';
import DengLu2 from '@/components/DengLu2.vue';
import HelloHello from '@/components/HelloHello.vue';
import SonOne from '@/components/SonOne.vue';
import SonThree from '@/components/SonThree.vue';
import SonTwo from '@/components/SonTwo.vue';

export default {
    components:{
        ButtonCounter,
        HelloHello,
        DengLu1,
        DengLu2,
        TDao1,
        TDao2,
        TDao3,
        DelayConn,
        SonOne,
        SonTwo,
        SonThree
    },
    data(){
        return{
            activeD:'',
            activeT:'',
            name:'Tom',
            age:[],
            sex:'',
            hobby:[],
            wid:300
        }
    },
    provide:{
        message:"新年快乐，这是来自父母的祝福"
    },
    methods: {
        dadHandle(val){
            alert('考了'+val+'，很不错！')
        },
        send(){
            this.$refs.childRef.receiveMsg("好孩子！")
        }
    },
}
</script>